<template>
  <static-container class="man-account">
    <static-container-header>
      新增代理
    </static-container-header>
    <static-container-body>
      <el-form class="man-account__form"
               :model="form"
               :rules="rules"
               @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
               ref="form"
               :disabled="loading"
               auto-complete="off"
               label-position="top"
      >
        <el-form-item prop="username" label="用户名：" :error="formError">
          <el-input
            v-model="form.username"
            auto-complete="off"
            placeholder="请输入用户名">
            <template slot="prepend">
              <svg-icon icon-class="user"></svg-icon>
            </template>
          </el-input>
        </el-form-item>

        <input type="password" v-show="false"/>

        <el-form-item class="main-container-main__item" label="密码：" prop="password">
          <password-input v-model="form.password" placeholder="8-20个数字/字母/特殊字符组成" auto-complete="new-password"></password-input>
        </el-form-item>
        <el-form-item vertical-fill="">
          <el-button type="primary" native-type="submit">保存</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <man-account-list ref="list"></man-account-list>
    </static-container-body>
  </static-container>
</template>

<script type="text/jsx">

  import {addProxyApi as saveApi} from '@/services/api/low-level';
  import {factory, form} from '@/build';

  import ManAccountList from './man-account-list';

export default {
  name:'man-account',

  mixins: [form],

  components: {
    ManAccountList
  },

  data() {
    return {
      form: {
        username: undefined,
        password: undefined
      },
      formError: '',
      rules: {
        username: factory.getRule('username'),
        password: factory.getRule('password'),
      },
    }
  },

  methods: {
    getCopyContent(row) {
      return `用户名：${row.username} ${row.password ? `密码：${row.password}` : ''} 网址：${window.document.location.origin}`;
    },
    reset() {
      this.formError = '';
      this.$refs.form.resetFields();
    }
  },
  mounted() {
    this.bindSave(saveApi, 'saveForm', 'form', {
      beforeSend: (data) => {
        this.formError = '';
        return data;
      },
      successMessage: '',
      afterSuccess: () => {

        const vm = this.$messageTip({
          title: '开户成功',
          message: (
            <el-form class="man-account__success-form" algin="left" size="small" label-width="70px">
              <el-form-item label="用户名：">
                {this.form.username}
              </el-form-item>
              <el-form-item label="密码：">
                {this.form.password}
              </el-form-item>
              <el-form-item label="网址：">
                {window.document.location.origin}
              </el-form-item>
            </el-form>
          ),
          type: 'success',
          goTo: <el-button
            block={true}
            onClick={() => {vm.close();}}
            data-clipboard-text={this.getCopyContent(this.form)}
            class="clipboard-btn"
          >复制内容</el-button>
        });

        this.reset();
        this.$refs.list.getAll();

        this.$global.bus.$emit('update:child-count');
      },
      afterFail: ([result, data]) => {
        this.formError = data.message;
      }
    });
  }
};
</script>
<style lang="scss">
  @include b(man-account) {
    @include e(form) {
      width: 410px;
    }
    @include e(success-form) {
      width: 240px;
      text-align: left;
    }

  }
</style>
